import styled from "styled-components";

export const HeaderWrapper = styled.div`

    &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .content {
        position: relative;
        z-index: 19;
        transition: all 250ms ease;
        background-color: ${props => props.theme.isAlpha ? 'rgba(255, 255, 255, 0)' : 'rgba(255, 255, 255, 1)'};
        border-bottom: 1px solid #eee;
        border-color: ${props => props.theme.isAlpha ? 'rgba(233, 233, 233, 0)' : 'rgba(233, 233, 233, 1)'};

        .top {
            display: flex;
            align-items: center;
            height: 80px;
        }
    }

    .cover {
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }
`

export const SearchAreaWrapper = styled.div` 
    transition: height 250ms ease;
    height: ${props => props.issearch ? '100px' : '0'};
`